
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="icon" href="./images/favicon.jpg">
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/font-awesome.min.css">
<title>管理员界面</title>
<style>
	*{
		padding: 0px;
		margin: 0px;
		border: 0px;
	}
	.managebox{
		width: 100%;
		height: 700px;
		background-image: url(img/shijing.png);
	}
	.leftbox{
		width: 20%;
		height: 700px;
		float: left;
		background-color: white;
	}
	.rightbox{
		width: 80%;
		height: 700px;
		float: left;
		background-color: gainsboro;
	}
	a{
		background-color: gainsboro;
		text-decoration: none;
	}
	.my-content{
		flex:auto;
	}
	.my-contentFrame{
		width:100%;
		height:800px;
		border:none;
	}
	.my-nav{
	flex:none;/*当本元素处于flex容器中时，保持原始大小，不伸缩*/
	width:200px;
	height:100%;
	background-color:white;
	
	border-right:1px solid #DDDDDD;/*设置本元素的右边框：1像素 细实线 浅灰色*/
	box-shadow:0px 0px 5px 1px #DDDDDD;  	/*设置边框阴影 左偏移0，右偏移0，模糊5px,向外扩展1px,颜色浅灰*/
}

#rightbox{
	flex:auto;/*当本元素处于flex容器中时，自动伸缩*/
	background-color:white;
	
	
	display:flex;
	flex-direction: column;/*纵向排列*/

}

.my-top{
	flex:none;
	width:100%;
	height:50px;
	
	display:flex;
	flex-direction: row;
	
	position:relative;/*设置本元素为子元素定位基准*/
}
	
	
</style>
</head>
<body style="height:100% !important;">
<div id="app" class="managebox">
	<!--左边框-->
	
	<div class="leftbox">
		<center style="color: dodgerblue;">照片：<img src="Images/shijing.png" width="200px" height="200px" class="img-thumbnail"></center>
		<div class="panel-group" id="accordion">
		    <div class="panel panel-default" align="center" style="margin-top: 50px;">
		        <div class="panel-heading">
		            <h5 class="panel-title">
		                <a data-toggle="collapse" data-parent="#accordion" 
		                href="#manageUser">
		                	密码管理
		                </a>
		            </h5>
		        </div>
		        <div id="manageUser" class="panel-collapse collapse in">
		            <div class="btn-group-vertical">
						<button type="button" class="btn btn-default"><a href="adminManager.html" @click="chooseMenu('密码管理','修改密码')" target="contentFrame" >修改密码</a></button>
		            </div>
		        </div>
		    </div>
		 <div class="panel panel-default" align="center" style="margin-top: 50px;">
		        <div class="panel-heading">
		            <h5 class="panel-title">
		                <a data-toggle="collapse" data-parent="#accordion" 
		                href="#manageStory">
		                	故事管理
		                </a>
		            </h5>
		        </div>
		        <div id="manageStory" class="panel-collapse collapse in">
		            <div class="btn-group-vertical">
						<button type="button" class="btn btn-default"><a href="javascript:void(0)" onclick=show('queryStory')>查询故事</a></button>
						<button type="button" class="btn btn-default"><a href="javascript:void(0)" onclick=show('queryStory')>删除故事</a></button>
		            </div>
		        </div>
		    </div>
		    <div class="panel panel-default" align="center" style="margin-top: 50px;">
		        <div class="panel-heading">
		            <h5 class="panel-title">
		                <a data-toggle="collapse" data-parent="#accordion" 
		                href="#manageMessage">
		                	信件管理
		                </a>
		            </h5>
		        </div>
		        <div id="manageMessage" class="panel-collapse collapse in">
		            <div class="btn-group-vertical">
						<button type="button" class="btn btn-default"><a href="javascript:void(0)" onclick=show('queryMessage')>查询信件</a></button>
						<button type="button" class="btn btn-default"><a href="javascript:void(0)" onclick=show('deleteMessage')>删除信件</a></button>
		            </div>
		        </div>
		    </div>
		    <div class="panel panel-default" align="center" style="margin-top: 50px;">
		        <div class="panel-heading">
		            <h5 class="panel-title">
		                <a data-toggle="collapse" data-parent="#accordion" 
		                href="#manageDiary">
		                	日记管理
		                </a>
		            </h5>
		        </div>
		        <div id="manageDiary" class="panel-collapse collapse in">
		            <div class="btn-group-vertical">
						<button type="button" class="btn btn-default"><a href="javascript:void(0)" onclick=show('queryDiary')>查询日记</a></button>
						<button type="button" class="btn btn-default"><a href="javascript:void(0)" onclick=show('deleteDiary')>删除日记</a></button>
		            </div>
		        </div>
		    </div>
		    <div class="panel panel-default" align="center" style="margin-top: 50px;">
		        <div class="panel-heading">
		            <h5 class="panel-title">
		                <a data-toggle="collapse" data-parent="#accordion" 
		                href="#managePhoto">
		                	相册管理
		                </a>
		            </h5>
		        </div>
		        <div id="managePhoto" class="panel-collapse collapse in">
		            <div class="btn-group-vertical">
						<button type="button" class="btn btn-default"><a href="javascript:void(0)" onclick=show('queryPhoto')>查询照片</a></button>
						<button type="button" class="btn btn-default"><a href="javascript:void(0)" onclick=show('deletePhoto')>删除照片</a></button>
		            </div>
		        </div>
		    </div>
		</div>
	</div>
	<!--
    	右边框
    -->
    
	<div class="rightbox">
		<!-- 导航栏 -->
		<div class="my-top bg-light">
			<button @click="switchNav" type="button" class="btn btn-light ml-2 my-1 "><i class="fa fa-bars"></i></button>
			<nav>
			  <ol class="breadcrumb bg-light">
			    <li class="breadcrumb-item"><a href="#">管理员管理页</a></li>
			    <!-- v-if="currentMenu.one" 表示当前是否存在选中的一级菜单，若存在生成当前元素 -->
			    <li v-if="currentMenu.one" class="breadcrumb-item"><a href="#">{{currentMenu.one}}</a></li>
			    <li v-if="currentMenu.two" class="breadcrumb-item active">{{currentMenu.two}}</li>
			  </ol>
			</nav>
			
			<!-- position:absolute;表示相对于设置了定位基准的父元素定位 -->
			<div style="position:absolute;right:10px;bottom:5px;font-size:14px;">
				<span>当前用户：{{currUser.u_name}}</span>
				&nbsp;&nbsp;
				<!-- @click.prevent 表示单击时阻止组件的默认行为（即阻止超链跳转href指向的地址） -->
				<a href="#" @click.prevent="logout"  >退出</a>
			</div>
			
			
		</div>
		<!-- 内容 -->
		<div class="my-content">
			<iframe class="my-contentFrame" name="contentFrame"></iframe>
		</div>
		
	</div>
</div>

<script src="./js/jquery.slim.min.js"></script>
<script src="./js/popper.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./layer/layer.js"></script>
<script src="./js/sweetalert2.all.min.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/vue.min.js"></script>
<script src="./js/request.js"></script>

<script type="text/javascript">
new Vue({
	el:'#app',
	data:{
		navShow:true,//导航是否显示，该变量控制导航菜单是否显示
		currentMenu:{//当前选中的菜单
			one:'',
			two:''
		},
		currUser:{},//当前用户信息
	},
	methods:{
		switchNav(){
			//本函数将变量navShow的值取反
			this.navShow = !this.navShow;			
		},
		
		//选中菜单
		chooseMenu(one,two){
			
			this.currentMenu = {one,two};
			
		},
		//退出系统
		logout(){
			http_post('logout',{},{postMsg:true}).then(()=>{
				window.sessionStorage.removeItem('CurrUser');//清除当前用户信息
				window.location.href='adminLogin.jsp';
			});
		}
	},
	mounted(){
		const currUserStr = window.sessionStorage.getItem("CurrUser");	
		console.log("====>",currUserStr);
		this.currUser = JSON.parse(currUserStr);//将（json）字符串解析为对象
	}
});


</script>
</body>
</html>